
<template>
  <div class="login-container">
    <div class="login-header">
      <van-icon name="arrow-left" size="20" class="arrow" @click="router.back()"/>
      <h1>验证码登录</h1>
    </div>

    <div class="login-form">
      <van-form @submit="handleLoginByCode">
        <van-cell-group inset>
          <van-field
            v-model="codeForm.phone"
            name="手机号"
            label="手机号"
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写手机号' }]"
          />
          <van-field
            v-model="codeForm.code"
            name="验证码"
            label="验证码"
            placeholder="请输入验证码"
            :rules="[{ required: true, message: '请填写验证码' }]"
          >
            <template #button>
              <van-button 
                size="small" 
                type="primary" 
                @click="getCode" 
                :disabled="countdown > 0"
              >
                {{ countdown > 0 ? `${countdown}s后重试` : '获取验证码' }}
              </van-button>
            </template>
          </van-field>
        </van-cell-group>
        <div>我已阅读并同意《用户协议》和《隐私政策》</div>
        <div class="login-actions">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
  <div>111</div>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { useUserInfoStore } from '../stores/userInfo';

const router = useRouter();
const userInfoStore = useUserInfoStore();
const codeForm = ref({
  phone: '',
  code: ''
});
const countdown = ref(0);

const getCode = () => {
  // 这里添加发送验证码的逻辑
  countdown.value = 60;
  const timer = setInterval(() => {
    countdown.value--;
    if(countdown.value <= 0) {
      clearInterval(timer);
    }
  }, 1000);
};

const handleLoginByCode = async () => {
  try {
    await userInfoStore.loginByCode(codeForm.value);
    await userInfoStore.getInfo();
    router.push({name:'seeking'});
  } catch(e) {
    console.log(e);
    showToast('登录失败');
  }
};
</script>

<style scoped>
</style>
